use std::{collections::HashMap, fmt::format};

use crate::*;
use common::SubFutureInfo;
use leptos::leptos_dom::ev::SubmitEvent;
use leptos::logging;
use leptos::*;
use serde::{Deserialize, Serialize};
use serde_json::*;
use tracing::{debug, error, info};
use wasm_bindgen::prelude::*;

#[component]
fn MySelect() -> impl IntoView {
    let (value, set_value) = create_signal(0i32);
    view! {
      <select style="width: 100px; font-size: 18px;"
        on:change=move |ev| {
          let new_value = event_target_value(&ev);
          let new_value = new_value.parse::<i32>().unwrap();
          set_value.set(new_value);
        }
        prop:value=move || value.get().to_string()
      >
        <option value="0">"0"</option>
        <option value="1">"1"</option>
        <option value="2">"2"</option>
      </select>
      // 一个循环选择选项的按钮
      <button on:click=move |_| set_value.update(|n| {
        if *n == 2 {
          *n = 0;
        } else {
          *n += 1;
        }
      })>
        "Next Option"
      </button>

      <p>"Selected: " {move || value.get().to_string()} </p>

    }
}

#[component]
fn My501Select() -> impl IntoView {
    view! {
      <select style="width: 100px; font-size: 18px;">
        <option value="AP">"苹果:AP"</option>
        <option value="rb">"螺纹钢:rb"</option>
        <option value="hc">"热卷:hc"</option>
        <option value="MA">"甲醇:MA"</option>
        <option value="SR">"白糖:SR"</option>
        <option value="SA">"纯碱:SA"</option>
      </select>
    }
}

#[component]
pub fn YeePage() -> impl IntoView {
    let (code_name, set_code_name) = create_signal(String::from("AP"));
    let dict: HashMap<String, Vec<SubFutureInfo>> = HashMap::new();
    let (codes_dict, set_codes_dict) = create_signal(dict);
    spawn_local(async move {
        /*
        let args = serde_wasm_bindgen::to_value(&GreetArgs { name: "AP501" }).unwrap();
        let str = invoke("async_get_last_png", args ).await.as_string().unwrap_or_default();
        let str = invoke_without_args("get_futures").await.as_string().unwrap_or_default();
        let dict: HashMap<String, Vec<SubFutureInfo>> = serde_json::from_str(&str).unwrap();
        */
        let jsvalue = invoke_without_args("get_futures").await;
        let dict: HashMap<String, Vec<SubFutureInfo>> =
            serde_wasm_bindgen::from_value(jsvalue).unwrap();
        set_codes_dict.set(dict);
    });

    view! {
      <div align="center">
          <My501Select on:change=move |ev| {
            let v = event_target_value(&ev);           
            set_code_name.set(v);
          }/>      
      </div>
      <div align="center">
        {
          move || {
                let code = code_name.get();
              let dict = codes_dict.get();
              let items:Vec<SubFutureInfo> = if dict.contains_key(&code) {
                  dict.get(&code).unwrap().clone()
                }else{
                  vec![]
                };
                view!{
                {
                items.into_iter().map(|item| {
                  let link1 = format!("http://{}/yee/static/out/{}.png", item.addr, item.code);
                  let link2 = format!("http://{}/yee/static/out/{}-Dog.png", item.addr, item.code);
                  let link3 = format!("http://{}/yee/static/out/{}-VI.png", item.addr, item.code);
                  let link4 = format!("http://{}/yee/static/out/{}-Simple.png", item.addr, item.code);
                  let name = format!("{}", item.code);
                  view! { {name} : {link1.clone()} <br/>
                      <p> <img src={link1} width="100%" />  </p> 
                      <p> <img src={link2}  width="100%" />  </p> 
                      <p> <img src={link3}  width="100%" />  </p> 
                      <p> <img src={link4}  width="100%"/>  </p> 
                  }
                }
                  ).collect_view() }
              }
          }
        }
      </div>
    }
}

